<template>
    <div class="page_warp">
        <div class="header">
            <div class="header_warp">
                <div class="header_top">
                    <div class="header_top_left">
                        <img class="left_img" src="../imgUrl/mapisIocn.png" alt="">
                        <div class="left_text">贞一环境智慧运管中心</div>
                    </div>

                    <div class="header_top_right">
                        <div class="right_warp">
                            <div class="right_warp_left">
                                <img style="width: 100%;" src="../imgUrl/maoHeader001.png" alt="">
                            </div>
                            <div class="right_warp_right">
                                <div class="right_text">污水厂总数/个</div>
                                <div class="right_tnum">1</div>
                            </div>
                        </div>
                        <div class="right_warp">
                            <div class="right_warp_left">
                                <img style="width: 100%;" src="../imgUrl/maoHeader002.png" alt="">
                            </div>
                            <div class="right_warp_right">
                                <div class="right_text">能耗/Kwh</div>
                                <div class="right_tnum">0</div>
                            </div>
                        </div>
                        <div class="right_warp">
                            <div class="right_warp_left">
                                <img style="width: 100%;" src="../imgUrl/maoHeader003.png" alt="">
                            </div>
                            <div class="right_warp_right">
                                <div class="right_text">设备总数/件</div>
                                <div class="right_tnum">0</div>
                            </div>
                        </div>
                        <div class="right_warp">
                            <div class="right_warp_left">
                                <img style="width: 100%;" src="../imgUrl/maoHeader004.png" alt="">
                            </div>
                            <div class="right_warp_right">
                                <div class="right_text">治理污水吨数/吨</div>
                                <div class="right_tnum">0</div>
                            </div>
                        </div>
                        <img @click="mapBlck" style="width: 60px;height: 60px;margin: 5px 10px;"
                            src="../imgUrl/mapBlack.png" alt="">

                    </div>
                </div>
                <img style="width: 100%;" src="../imgUrl/mapheaderxian.png" alt="">
            </div>
        </div>
        <div class="center">
            <div class="left">
                <div class="video">
                    <div class="videoText">视频监控</div>
                    <div class="videoList">
                        <div style="padding:15px;">
                            <VidoePaly :src="vidoeData[0].url" :name="'video001'" />
                            <VidoePaly :src="vidoeData[2].url" :name="'video002'" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">
                <iframe class="iframeStyle" :src="iframeSrc" frameborder="0"></iframe>
            </div>
        </div>
    </div>
</template>

<script>
import vidoeJson from '../../../../public/draco/vidoeJson';
import VidoePaly from './vidoePaly.vue'
import { listCenter } from '@/api/scada/center';
export default {
    name: 'mapping',
    components: {
        VidoePaly
    },
    data() {
        return {
            vidoeData: [],
            iframeSrc: ''
        }
    },
    created() {
        this.vidoeData = vidoeJson
        this.listCenterFun()
    },
    mounted() {
    },
    methods: {
        // 查询组态中心列表
        listCenterFun() {
            let params = {
                pageSize: 999,
                pageNum: 1,
            }
            listCenter(params).then((response) => {
                if (response.code === 200) {
                    this.centerList = response.rows;
                    this.arrowDownitem(this.centerList[0])
                }
            });
        },
        arrowDownitem(item) {
            if (process.env.NODE_ENV == "development") {
                this.iframeSrc = `http://localhost/topo/fullscreen?id=${item.id}&guid=${item.guid}`
            } else {
                this.iframeSrc = `http://zyhjxy.cn/topo/fullscreen?id=${item.id}&guid=${item.guid}`
            }

        },
        mapBlck() {
            this.$emit('success', {
                type: 1
            })
        }
    }
}
</script>

<style lang="scss" scoped>
body,
html {
    margin: 0;
    padding: 0;
}

.page_warp {
    width: 100vw;
    height: 100vh;
    background-image: url(../imgUrl/maptwobjt.png);
    background-size: 100% 100%;
    transform-origin: 0% 0%;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.header {
    width: 100vw;
    height: 10vh;

    .header_warp {
        width: 100%;
        background: linear-gradient(177deg, #070B14 5%, rgba(7, 11, 20, 0) 100%);


        .header_top {
            display: flex;
            justify-content: space-between;

            .header_top_left {
                display: flex;
                padding: 16px 16px 0px 30px;

                .left_img {
                    width: 60px;
                    height: 60px;
                }

                .left_text {
                    font-weight: bold;
                    font-size: 32px;
                    color: #FFFFFF;
                    line-height: 60px;
                    margin-left: 30px;
                }
            }

            .header_top_right {
                display: flex;
                // margin-top: 10px;
                padding-top: 10px;

                .right_warp {
                    display: flex;

                    .right_warp_left {
                        width: 70px;
                        padding: 10px;
                    }

                    .right_warp_right {
                        width: 200px;
                        padding: 10px 0px 0px 0px;

                        .right_text {
                            font-family: Inter, Inter;
                            font-weight: 400;
                            font-size: 18px;
                            color: #D7EBFF;

                        }

                        .right_tnum {
                            font-weight: bold;
                            font-size: 28px;
                            color: #FFFFFF;

                        }
                    }
                }
            }
        }
    }
}

.center {
    display: flex;

    .left {
        width: 23vw;
        height: 85vh;
        padding: 20px 10px;

        .video {
            background-image: url(../imgUrl/mapvideobiank.png);
            background-size: 100% 100%;

            .videoText {
                width: 100%;
                font-family: Source Han Sans CN, Source Han Sans CN;
                font-weight: bold;
                font-size: 20px;
                color: #FFFFFF;
                padding: 7px 20px;
            }

            .videoList {
                width: 100%;
                height: 75vh;
                overflow-y: scroll;

                &::-webkit-scrollbar {
                    display: none;
                    /* 对于Chrome, Safari和Opera */
                }
            }


        }
    }

    .right {
        flex: 1;
        height: 85vh;
    }
}

::v-deep .iframeStyle {
    width: 100%;
    height: 100%;
    overflow: auto;
    /* 这确保内容如果超出容器会滚动 */
    scrollbar-width: none;
    /* 对于Firefox */

    &::-webkit-scrollbar {
        display: none;
        /* 对于Chrome, Safari和Opera */
    }

}



::-webkit-scrollbar {
    /*隐藏滚轮*/
    display: none;
}

.arrowDownUr {
    width: 100%;
    background-color: rgba(0, 55, 86, 0.60);
    height: 300px;
    border-radius: 5px;
    overflow-y: scroll;
    position: absolute
}

.arrowDownLi {
    width: 100%;
    text-align: center;
    padding: 5px 0;
    cursor: pointer;
}

.arrowDownLiClick {
    color: #00C2FF;
}

.cardLang_video {
    width: 100%;
    height: 180px;
    background-color: gainsboro;
    margin-top: 5px;
}
</style>
